<!-- echart界面 -->
<template>
    <div>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="start" style="width: 600px;height:400px;"></div>
        <!-- -->
        <div id="table1" style="width: 600px;height:400px;"></div>
    </div>
</template>

<script>
  // import {apiDefaultErrorHandler} from "../../api/base";
  // import databaseApi from "../../api/operation/database";
  // import {deepCopy} from "../../utils";
  import * as echarts from 'echarts';

  export default {
    name: "echart",

    data() {
      return {

      };
    },
    mounted() {
      this.startView() // 基础图 一
      this.startTable1()
    },
    methods: {
      startView() {
        var myChart = echarts.init(document.getElementById('start'), 'dark');
        myChart.setOption({
          title: {
            text: '本周工时统计图'
          },
          tooltip: {},
          grid: {
            right: '30%',
            bottom: 100
          },
          xAxis: {
            type: 'category'
          },
          yAxis: {
          },
          dataset: {
            source: [
              ['周一', 8, 10.50],
              ['周二', 8, 9.34],
              ['周三', 8, 11.24],
              ['周四', 8, 8.90],
              ['周五', 8, 8.60],
            ]
          },
          series: [{
            background: '#e0861a',
            name: '工时(h)',
            type: 'bar',
            encode: {x: 0, y: 1}
          },{
            name: '工时(h)',
            type: 'line',
            encode: {x: 0, y: 2}
          },{
            type: 'pie',
            roseType: 'angle',
            center: ['80%', 60],
            radius: 35,
            encode: {itemName: 0, value: 2}
          }]
        });
      },
      startTable1() {
        var myChart = echarts.init(document.getElementById('table1'), 'dark');
        var option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {gridIndex: 0},
          grid: {top: '55%'},
          series: [
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {focus: 'data'},
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        };

        myChart.on('updateAxisPointer', function (event) {
          var xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });

        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>

</style>